<template>
  <div>
    <div class="map" ref="map"></div>
  </div>
</template>

<script>
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { GaodeMap } from '@antv/l7-maps';
import { getCovid19Data } from '@/api/covid19Data.js'


export default {
    data(){
        return{
            el: null,
            scene: null,
            layer: null,
            ProvinceData:[]
            }
    },

    created(){
        this.onLoadData()
    },

    methods:{
      //加载主数据
      onLoadData(){
        let mainData = {}
        getCovid19Data(mainData).then(response => {
          this.ProvinceData = response.data.data.provinceArray
          console.log(this.ProvinceData)
          this.initMap()
        })
      },
      initMap(){
          this.$nextTick(() => {
              this.el = this.$refs.map
              this.scene = new Scene({
              logoVisible: false,
              id: this.el,
              map: new GaodeMap({
                  center: [ 100, 37.5 ],
                  pitch: 0,
                  style: 'blank',
                  zoom: 3,
                  minZoom: 0,
                  maxZoom: 10
              })
              });

              this.scene.on('loaded', () => {
                this.layer = new CountryLayer(this.scene, {
                  data: this.ProvinceData,
                  joinBy: [ 'NAME_CHN', 'childStatistic' ],
                  depth: 1,
                  fill: {
                    color: '#ccc'
                  },
                  bubble: {
                    enable: true,
                    size: {
                      field: 'totalConfirmed',
                      values: (totalConfirmed) => { // 颜色的回调函数
                          return  totalConfirmed > 4800 ? 25 :
                                  totalConfirmed > 2400 ? 23 :
                                  totalConfirmed > 1280 ? 21 :
                                  totalConfirmed > 640 ? 19 :
                                  totalConfirmed > 320 ? 17 :
                                  totalConfirmed > 160 ? 15 :
                                  totalConfirmed > 80 ? 13 :
                                  totalConfirmed > 40 ? 11 :
                                  totalConfirmed > 20 ? 9 :
                                  totalConfirmed > 10 ? 7 : 5
                      }
                    },
                    color: {
                      field: 'NAME_CHN',
                      values: [
                        '#e6550d',
                      ]
                    }
                  },
                  popup: {
                    enable: true,
                    Html: props => {
                      return `<p>${props.NAME_CHN}</p>
                              <p><span>总确诊人数:</span><span>${props.totalConfirmed}</span></p>
                              <p><span>总治愈人数:</span><span>${props.totalCured}</span></p>
                              <p><span>总死亡人数:</span><span>${props.totalDeath}</span></p>
                              `;
                    }
                  }
                });
              });
            })
      }
    }
}
</script>

<style scoped>
.map{
    margin-top: 10px;
    height: 80vh;
    width: 100%;
    position: relative;
  }
</style>